<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
import api from '@/api'
import config from '@/config/debug'
import * as cache from '@/util/cache'
export default {
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    /**
     * 在子组件中刷新页面
     */
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },
    /**
     * 显示为测试版
     */
    async showTestSystem() {
      const { data } = await api.System.showTest()
      this.$store.dispatch('System/set_testSystem', data).then(() => {
        if (data) {
          this.$createDialog({
            title: '系统维护中',
            content: '系统升级中,请勿下单~~'
          }).show()
        }
      })
    },
    // offline pay
    async offlinePay() {
      const { data } = await api.System.offlinePay()
      this.$store.dispatch('System/set_pay', data.pay).then()
    },
    /**
     * 显示系统开发信息
     */
    async showSystemInfo() {
      const write = (data) => {
        if (data && data.show) {
          if (process.env.NODE_ENV === 'production') {
            const version = data.info
            const appName = process.env.VUE_APP_NAME || '缤客多门店'
            console.log(`%c欢迎使用${appName}系统, 目前版本为:${version.version}`, 'color: red; font-size: 12px;')
            console.log(version.copyright)
            console.log(`如果您也对开发感兴趣,也了解 ${version.keywords.join(', ')} 这些...`)
            console.log(`可以联系我们:${version.contact}, 一起讨论,研究,或者共事...`)
          }
        }
      }
      const cache = this.$store.getters['System/versionInfo']
      // console.log(cache)
      if (cache !== null) {
        write(cache)
      } else {
        const { data } = await api.System.systemInfo()
        this.$store.dispatch('System/set_version', data).then(() => {
          write(data)
        })
      }
    }
  },
  beforeCreate () {
    // clear all cache
    if (process.env.NODE_ENV === 'dev' && config.clearCache) {
      cache.removeAll()
    }
  },
  created () {
    this.showTestSystem()
    this.showSystemInfo()
    this.offlinePay()
  }
}
</script>

<style lang="stylus">

// 使用pf打包, 会增加10m大小
// 使用自定义字体
//@font-face
//  font-family: 'base'
//  src: url('./assets/fonts/base.ttf')
//
//@font-face
//  font-family: 'pf'
//  src: url('./assets/fonts/pf.ttf')

html, body
  height 100%

#app
  font-family "Microsoft YaHei", Avenir, Helvetica, Arial, sans-serif
  //font-family base
  //font-family pf
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #333
  font-size 12px
  background $background_color
  min-height 100%
  box-sizing border-box

  // 图片显示
  div.image, span.image
    display flex
    align-items center
    box-sizing border-box
    img
      display block
      margin auto
      width auto
      height auto
      max-width 100%
      max-height 100%

  // 详情内容(图片显示处理)
  div.content
    ::v-deep
      img
        width 100%

  // 文字隐藏(省略号)
  .text-hide
    overflow hidden
    text-overflow ellipsis
    white-space nowrap

  // 两行
  .two-lines
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-line-clamp: 2
      line-clamp 2
      -webkit-box-orient vertical

  // 阴影
  .shadow
    box-shadow 0 7.5px 5px #e0e1e1

</style>
